<template>
	<u-popup :show="show" @close="hide" closeOnClickOverlay :safeAreaInsetBottom="false">
		<sl-page class="material-preview" :title="title" :isBack="true" :backPage="false" @navbar:backPage="hide">
			<view class="material-preview__inner padding m-b20 b-f">
				<material-previewer :show="show" :material="material" :width="width" :height="height"
					v-if="material && material.id" @material:load="onMaterialLoad" @material:preview="onPreview"
					@material:office="onOpen">
				</material-previewer>
			</view>
			<view class="material-preview__actions flex flex-x-center">
				<action shadow type="success" icon="share-square" text="打开文档" @click="onOpen"></action>
				<action shadow type="success" icon="photo" text="保存到相册" @click="onSave"></action>
			</view>
		</sl-page>
		<MaterialDownloader :showProgress="showProgress" :file="file" />
	</u-popup>
</template>

<script>
	import MaterialPreviewer from './previewer.vue';
	import Download from './download.js'
	import MaterialDownloader from './downloader.vue'
	export default {
		name: 'material-preview',
		mixins: [Download],
		components: {
			MaterialPreviewer,
			MaterialDownloader
		},
		props: {
			title: {
				type: String,
				default: '文件预览'
			},
			visible: {
				type: Boolean,
				default: false
			},
			material: {
				type: Object,
				default: () => {}
			},
			width: { // 宽度 (需带单位,支持格式: '100%', '300px', '300rpx')
				type: String,
				default: '100%'
			},
			height: { // 高度 (需带单位,支持格式: '100%', '300px', '300rpx')
				type: String,
				default: '320rpx'
			},
		},
		data() {
			return {
				show: false,
				materialLoads: [],
			}
		},
		watch: {
			visible: function() {
				this.show = this.visible;
			},
		},
		computed: {
			images: function() {
				let images = [];
				this.materialLoads.forEach(p => {
					if (p && p.url) {
						images.push(p.url)
					}
				})
				return images;
			},
		},
		methods: {
			hide: function() {
				this.show = false;
				this.$emit('update:visible', false)
			},
			onOpen: function() {
				this.openFile();
			},
			onSave: function() {
				this.saveFile();
			},
			onMaterialLoad: function(file) {
				this.materialLoads.push(file)
			},
			onPreview: function(index) {
				uni.previewImage({
					current: index,
					urls: this.images
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
</style>
